<template>
  <div>
    <app-header></app-header>
    <el-form :inline="true" :model="items" class="demo-form-inline" ref="etoak" >
      <el-form-item label="姓名:" prop="itemName">
        <el-input
          v-model="items.itemName"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="身体状况" prop="value">
        <el-select v-model="items.value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="返回日期 从:" prop="fromDate">
        <el-date-picker
          v-model="items.fromDate"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="至" prop="toDate">
        <el-date-picker
          v-model="items.toDate"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="体温" prop="tempreature">
        <el-select v-model="items.tempreature" placeholder="请选择">
          <el-option
            v-for="item in tempreature"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="外地流入地区:" prop="location">
        <el-input
          v-model="items.location"
          placeholder="请输入从哪来"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="onReset('etoak')">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="display:flex;justify-content:center">
        <div id="percentage">
      <el-progress type="circle" :percentage="highRisk" color="#FF6347"></el-progress>
    <el-progress type="circle" :percentage="normal" color="#6699FF"></el-progress>
    <el-progress
      type="circle"
      :percentage="abnormal"
      color="#FFA500"
    ></el-progress>
    </div>
    </div> 
    <br />

    <el-table :data="temp" style="width: 100%" :cell-style="finalstyle" stripe>
<!--      <el-table-column label="照片">-->
<!--        <template slot-scope="scope">-->
<!--          <img :src="scope.row.avatar" style="height: 60px; width: 70px" />-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="id" label="id标识"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="idnumber" label="身份证号"></el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>
      <el-table-column prop="value" label="身体状况"></el-table-column>
      <el-table-column prop="tempereature" label="体温"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="time" label="到访时间"></el-table-column>
      <el-table-column label="编辑">
       <template scope="scope">
         <el-button type="primary" @click="handleEdit(scope.$index,scope.row)">修改</el-button>
         <el-button type="danger" @click="deleteData(scope.$index,scope.row)">删除</el-button>
         <!-- 编辑时候的弹出层 -->
         <el-dialog title="修改用户信息"
                    :visible.sync="dialogFormVisible"
                    width="500px"
                    top="200px">
           <el-form :model="demo">
<!--             <el-form-item label="id标识">-->
<!--               <el-input v-model="demo.id"></el-input>-->
<!--             </el-form-item>-->
             <el-form-item label="姓名">
               <el-input v-model="demo.name"></el-input>
             </el-form-item>
             <el-form-item label="身份证号">
               <el-input v-model="demo.idnumber"></el-input>
             </el-form-item>
             <el-form-item label="联系电话">
               <el-input v-model="demo.phone"></el-input>
             </el-form-item>
             <el-form-item label="身体状况">
               <el-input v-model="demo.value"></el-input>
             </el-form-item>
             <el-form-item label="体温">
               <el-input v-model="demo.tempereature"></el-input>
             </el-form-item>
             <el-form-item label="地址">
               <el-input v-model="demo.address"></el-input>
             </el-form-item>
             <el-form-item label="到访时间">
               <el-input v-model="demo.time"></el-input>
             </el-form-item>
           </el-form>
           <div slot="footer">
             <el-button @click="dialogFormVisible = false">取 消</el-button>
             <el-button type="primary" @click="handleSet(scope.$index, scope.row)">确 定</el-button>
           </div>
         </el-dialog>
       </template>
      </el-table-column>
    </el-table>
<!--    <br />-->
<!--    <el-pagination-->
<!--      :page-count=(total+pageSize-1)/pageSize-->
<!--      layout="  prev, pager, next"-->
<!--      :current-page="currentPage"-->
<!--      :page-size="pageSize"-->
<!--      @current-change="pageChange"-->
<!--      :total="total"-->
<!--    >-->
<!--    </el-pagination>-->
  </div>
</template>

<script>
import AppHeader from "@/components/AppHeader.vue";
import {addPersonalInforData,delPersonInforData,updatePersonInforData} from "@/request";
// import { SELECT } from "../api/select";
// import {SELECTcondition} from "../api/select"
// import { PERCENTAGEALL } from "../api/getPercentage";
// import { SELECTALL } from "../api/select";

export default {
  name: "Index",
  components: {
    AppHeader,
  },
  data() {
    return {
      dialogFormVisible: false,//弹出层默认为关闭
      temp: [],
      allArr: [],
      normal: 0,
      abnormal: 0,
      highRisk: 0,
      total: 0,
      demo:{},
      items: {
        itemName: "",
        value: "",
        fromDate: "",
        toDate: "",
        tempreature: "",
        location: "",
      },

      /* 身体状况 */
      options: [
        {
          value: "正常",
          label: "正常",
        },
        {
          value: "普通感冒",
          label: "普通感冒",
        },
        {
          value: "呼吸困难腹泻",
          label: "呼吸困难腹泻",
        },
      ],
      tempreature: [
        {
          value: "正常",
          label: "36℃~37.2℃",
        },
        {
          value: "低热",
          label: "37.4℃~38℃",
        },
        {
          value: "中热",
          label: "38.1℃~39℃",
        },
        {
          value: "高热",
          label: "39.1℃~41℃",
        },
        {
          value: "超高热",
          label: ">=41℃",
        },
      ],
      currentPage: 1,
      pageSize: 4,
    };
  },
  methods:{
    handleSet(index,row){
      let params1={
        id:row.id,
        address:row.address,
        idnumber:row.idnumber,
        name:row.name,
        phone:row.phone,
        tempereature: row.tempereature,
        time:row.time,
        value:row.value
      }
      console.log("输出params数据===》",params1)
      updatePersonInforData(this.demo)
          .then((res)=>{
            console.log("res===>",res)
            if(res.data.code==200){
              this.$message({
                message:'数据更新成功',
                type:'success',
                showClose:true
              })
            }
          })
          .catch((err)=>{
            this.$message({
              message:'更新数据失败',
              type:'error',
              showClose:true
        })
      })
      this.dialogFormVisible=false;
    },
    //编辑数据
    handleEdit(index,row){
      console.log("点击修改按钮的数据==》",row)
      this.demo=row;
      // console.log("数据temp行的数据==》",this.temp)
      this.dialogFormVisible=true;
      // this.temp.id=row.id;
      // this.temp.name=row.name;
      // this.temp.idnumber=row.idnumber;
      // this.temp.phone=row.phone;
    },
    //删除数据
    deleteData(data,data1){
      console.log("一行的数据==》",data+1) //当前的id值
      console.log("row数据==》",data1.id)
      delPersonInforData(data1.id)
          .then((res)=>{
            console.log("res===>",res)
            if(res.data.code==200){
              this.$message({
                message:'数据删除成功',
                type:'success',
                showClose:true
              })
            }
            this.getPersonData()
          })
          .catch((err)=>{
            this.$message({
              message:'获取数据失败',
              type:'error',
              showClose:true
            })
          })

    },
    getPersonData(){
      addPersonalInforData()
          .then((res)=>{
            console.log("获取数据===》",res.data.data)
            this.temp=res.data.data
          })
          .catch((err)=>{
            this.$message({
              message:'获取数据失败',
              type:'error',
              showClose:true
            })
          })
    }
  },
  created() {
    this.$message({
      // message:`${localStorage.getItem('username')}欢迎回来`,
      message:"你好，管理员，欢迎回来！",
      type:'success',
      showClose:true
    })
    this.getPersonData()
  },
  // methods: {
  //   getstrDate(date) {
  //     var year = date.getFullYear();
  //     var month = (date.getMonth() + 1).toString();
  //     var day = date.getDate().toString();
  //     if (month.length == 1) {
  //       month = "0" + month;
  //     }
  //     if (day.length == 1) {
  //       day = "0" + day;
  //     }
  //     var dateTime = year + "-" + month + "-" + day;
  //     return dateTime;
  //   },
  //
  //   pageChange(val) {
  //     this.currentPage = val;
  //     this.fetchData();
  //   },
  //   onReset(formName) {
  //     this.$refs[formName].resetFields();
  //     this.fetchAllData();
  //   },
  //   finalstyle: function ({ row, rowIndex }) {
  //     if (
  //       row["bodyTemperature"] > 37.4 &&
  //       row["physicalCondition"] === "普通感冒"
  //     ) {
  //       return {
  //         background: "#FFA500",
  //       };
  //     } else if (
  //       row["bodyTemperature"] > 37.4 &&
  //       row["physicalCondition"] === "呼吸困难腹泻"
  //     ) {
  //       return {
  //         background: "#FF6347",
  //       };
  //     }
  //   },
  //
  //   handleChange(val) {
  //     this.currentPage = val;
  //     this.fetchData();
  //   },
  //   fetchData() {
  //     let strFromDate = "";
  //     let strToDate = "";
  //     //let name = "";
  //     if (this.items.fromDate != "" && this.items.toDate != "") {
  //       strFromDate = this.getstrDate(this.items.fromDate);
  //       strToDate = this.getstrDate(this.items.toDate);
  //     }
  //    /*  if (this.items.itemName != "") {
  //
  //     } */
  //     SELECT(
  //       this.currentPage,
  //       this.pageSize,
  //       this.items.value,
  //       this.items.tempreature,
  //       strFromDate,
  //       strToDate,
  //       this.items.location,
  //       this.items.itemName
  //     ).then((response) => {
  //       this.temp = response.data.data;
  //       SELECTcondition(
  //       this.items.value,
  //       this.items.tempreature,
  //       strFromDate,
  //       strToDate,
  //       this.items.location,
  //       this.items.itemName).then(response=>{
  //         this.total=response.data.data.length
  //       })
  //     });
  //     PERCENTAGEALL(
  //       this.items.value,
  //       this.items.tempreature,
  //       strFromDate,
  //       strToDate,
  //       this.items.location,
  //       this.items.itemName
  //     ).then((response) => {
  //       this.normal = response.data.data.normal;
  //       this.abnormal = response.data.data.abnormal;
  //       this.highRisk = response.data.data.highRisk;
  //     });
  //   },
  //   fetchAllData() {
  //     SELECTALL().then((response) => {
  //       //this.allArr = response.data.data;
  //       this.total = this.allArr.length;
  //     });
  //     this.fetchData();
  //   },
  //
  //
  //   /* 字符串转date */
  // },
  //
  // created() {
  //   this.fetchAllData();
  // },

};
</script>

<style scoped>
div#percentage{
  display: flex;
  justify-content: space-between;
  width: 500px;
}
.el-form{
  margin-top: 40px;
  font-size: larger;
}
.el-table{
  font-size: larger;
  /*color:red;*/
}
</style>